<template>
  <div class="radio-button-container d-flex ai-c">
    <div
      :class="['radio-button-item c-pointer d-flex ai-c jc-c', currentValue === item.value ? 'active' : '', ]"
      v-for="item in list"
      :key="item.value"
      @click="clickItem(item.value)"
    >
      <span>{{ item.label }}</span>
      <div class="active-trangle" />
    </div>
    <slot name="append" />
  </div>
</template>

<script>
export default {
  name: 'RadioButton',
  props: {
    value: {
      type: String,
      default: ''
    },
    dictionaryKey: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      currentValue: this.value,
      list: []
    }
  },
  watch: {
    value (v) {
      this.currentValue = v
    },
    currentValue (v) {
      this.$emit('input', v)
    }
  },
  created () {
    this.initList()
  },
  methods: {
    async initList () {
      this.list = await this.$utils.dictionary.getOptionsByKey(this.dictionaryKey)
    },
    clickItem (v) {
      this.currentValue = v
    }
  }
}
</script>

<style lang="scss" scoped>
.radio-button-container {
  flex-wrap: wrap;
  gap: 10px;

  .radio-button-item {
    border: 1px solid #dcdfe6;
    width: 65.8px;
    height: 28px;
    color: #424e61;
    border-radius: 4px;
    position: relative;

    &.active,
    &:hover {
      border-color: #165fd9;

      .active-trangle::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        border-bottom: 10px solid #165fd9;
        border-left: 10px solid transparent;
        border-bottom-right-radius: 2px;
      }
    }
  }
}
</style>
